<template>
  <div class="indexContainer">
    <SearchIcon title="网易严选"></SearchIcon>
    <div class="middle">
      <img
        class="middleImg"
        style="width: 2.68rem; height: 0.9rem"
        src="//yanxuan.nosdn.127.net/static-union/164793255107785e.png"
        alt=""
      />
      <van-button class="dangerBtn" type="danger" @click="toLogin">
        <van-icon name="phone" />
        <span>手机号快捷登录</span>
      </van-button>
      <van-button class="plainBtn" plain type="success" @click="toRegister">
        <van-icon name="envelop-o" />
        <span>注册</span>
      </van-button>
    </div>

    <div class="footerBar">
      <span>
        <van-icon name="wechat" />
        <span style="margin-right: 15px">微信</span>
        <span style="margin-right: 10px">|</span>
      </span>

      <span>
        <van-icon name="qq" />
        <span>QQ</span>
        <span style="margin-left: 15px">|</span>
      </span>

      <span style="margin-left: 10px">
        <van-icon name="weibo" />
        <span>微博</span>
      </span>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { Button } from 'vant'
export default defineComponent({
  name: 'User'
})
</script>
<script lang="ts" setup>
import Login from '@/views/login/index.vue'
// import router from "@/router";
import { useRouter } from 'vue-router'

const router = useRouter()

const goRegister = () => {
  router.push('/Register')
}
const toLogin = () => {
  router.push('/login')
}
const toRegister = () => {
  router.push('/Register')
}
</script>

<style lang="less" scoped>
.indexContainer {
  height: 100%;
}
.middle {
  position: relative;
}
.middleImg {
  position: absolute;
  right: 3.66667rem;
  top: 5.54667rem;
}
.dangerBtn {
  width: 335.2px;
  height: 44px;
  // position: absolute;
  // top: 250px;
  // left:20px
  margin-top: 270px;
  margin-left: 20px;
}

.plainBtn {
  width: 335.2px;
  height: 44px;
  margin-top: 20px;
  margin-left: 20px;
}
.footerBar {
  margin-top: 200px;
  // margin-left: 50px;
  text-align: center;
}
.footerBar span {
  font-size: 16px;
}
</style>
